
<style scoped>
    .search {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .search-area {
        width: 100%;
        height: 60px;
        box-shadow: #ddd 0px 0px 1px 1px;

        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .search-area > img {
        width: 60px;
        height: 40px;
        border-radius: 20px;
        margin-left: 50px;
        margin-right: 30px;
    }
    .search-area > .input {
        display: flex;
        flex-direction: row;
    }
    .search-area > .input > select,input {
        font-size: 18px;
        padding: 5px;
    }
    .search-area > .input > input[type=text] {
        margin-left: -1px;
        width: 400px;
    }
    .search-area > .input > input[type=button] {
        margin-left: -1px;
    }

    .table-area {
        width: 100%;
        height: 100%;
        background-image: url("../images/background.jpg");
        background-size: 100%;
        filter: opacity(25%);
        
    }
    .table-area > .no-data {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 24px;
    }
    .table-area > ul {
        margin: 0px;
        padding: 0px;
        margin-left: 140px;
    }
</style>

<template>
    <div class="search">
        <div class="search-area">
            <img src="../images/logo.jpg" />
            <div class="input">
                <select v-model="curModeIndex">
                    <option v-for="(item, index) in modeList" :value="index">{{item.text}}</option>
                </select>
                <input type="text" v-model="inputKeyword" :placeholder="modeList[curModeIndex].placeholder" />
                <input type="button" value="查找" @click="search" />
            </div>
        </div>
        <div class="table-area">
            <ul>
                <li>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "search",
        data () {
            return {
                inputKeyword: "",
                curModeIndex: 0,
                modeList: [
                    {
                        mode: "querybyname",
                        text: "查姓名",
                        placeholder: "请输入你想要查询的姓名",
                        key: "name"
                    },
                    {
                        mode: "querybyidcard",
                        text: "查证件号",
                        placeholder: "请输入你想要查询的证件号（如身份证等）",
                        key: "idcard"
                    },
                    {
                        mode: "querybyaddress",
                        text: "查地址",
                        placeholder: "请输入你想要查询的地址",
                        key: "address"
                    }
                ],

                curPageNum: 0,
                curPageData: []
            };
        },
        computed: {
            curMode () {
                return this.modeList[this.curModeIndex];
            },
            curQueryUrl () {
                let baseAddress = "http://localhost:3000/";
                return baseAddress + this.curMode.mode + "?" + this.curMode.key + "=" + this.inputKeyword;
            }
        },
        methods: {

            async getCurPageData () {
                try {
                    let rsp = await axios.get(this.curQueryUrl);
                    console.log(rsp);
                }
                catch (e) {

                }
            },

            async search () {
                await this.getCurPageData();
            }
        },
        watch: {
            curModeIndex () {
                this.inputKeyword = "";
            }
        }
    };
</script>
